<template>
  <div id="files">
    <el-form
      class="files flex-form"
      :model="uploadForm"
      :rules="upload"
      label-position="top"
    >
      <el-form-item :label="$t('存储方式')" prop="storage" class="row">
        <el-radio-group v-model="uploadForm.storage" @change="chooseStorage">
          <el-radio label="local">{{ $t('本地存储') }}</el-radio>
          <el-radio label="aliyun">{{ $t('阿里云oss') }}</el-radio>
          <el-radio label="qiniu">{{ $t('七牛云oss') }}</el-radio>
          <el-radio label="tencent">{{ $t('腾讯云oss') }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- <el-form-item label="文件存储设置" prop="storage_setting">
        <el-input v-model="uploadForm.storage_setting" />
      </el-form-item> -->
      <el-form-item :label="$t('文件大小')" prop="file_size">
        <el-input
          v-model="uploadForm.file_size"
          class="left"
          :placeholder="$t('请输入文件大小')"
        />
      </el-form-item>
      <el-form-item :label="$t('文件格式')" prop="file_ext">
        <el-input
          v-model="uploadForm.file_ext"
          class="right"
          :placeholder="$t('请输入文件格式')"
        />
      </el-form-item>
      <!-- <el-form-item :label="$t('最大上传个数')" prop="max_files">
        <el-input v-model="uploadForm.max_files" />
      </el-form-item> -->
      <el-form-item :label="$t('分片大小')" prop="chunk_size">
        <el-input v-model="uploadForm.chunk_size" />
      </el-form-item>
      <el-form-item :label="$t('分片触发条件')" prop="chunk_condition">
        <el-input v-model="uploadForm.chunk_condition" />
      </el-form-item>
      <el-form-item :label="$t('图片大小')" prop="image_size">
        <el-input
          v-model="uploadForm.image_size"
          class="left"
          :placeholder="$t('请输入图片大小')"
        />
      </el-form-item>
      <el-form-item :label="$t('图片格式')" prop="image_ext">
        <el-input
          v-model="uploadForm.image_ext"
          required
          class="right"
          :placeholder="$t('请输入图片格式')"
        />
      </el-form-item>
      <el-form-item :label="$t('视频大小')" prop="video_size">
        <el-input
          v-model="uploadForm.video_size"
          class="left"
          :placeholder="$t('请输入视频大小')"
        />
      </el-form-item>
      <el-form-item :label="$t('视频格式')" prop="video_ext">
        <el-input
          v-model="uploadForm.video_ext"
          class="right"
          :placeholder="$t('请输入视频格式')"
        />
      </el-form-item>
      <el-form-item :label="$t('音频大小')" prop="audio_size">
        <el-input
          v-model="uploadForm.audio_size"
          class="left"
          :placeholder="$t('请输入音频大小')"
        />
      </el-form-item>
      <el-form-item :label="$t('音频格式')" prop="audio_ext">
        <el-input
          v-model="uploadForm.audio_ext"
          class="right"
          :placeholder="$t('请输入音频格式')"
        />
      </el-form-item>

      <el-form-item :label="$t('压缩包大小')" prop="zip_size">
        <el-input
          v-model="uploadForm.zip_size"
          class="left"
          :placeholder="$t('请输入压缩包大小')"
        />
      </el-form-item>
      <el-form-item :label="$t('压缩包格式')" prop="zip_ext">
        <el-input
          v-model="uploadForm.zip_ext"
          class="right"
          :placeholder="$t('请输入压缩包格式')"
        />
      </el-form-item>
      <div v-if="uploadForm.storage == 'tencent'" class="flex-form">
        <el-form-item :label="$t('接收秘钥ID')" prop="tencent_accessKeyId">
          <el-input v-model="uploadForm.tencent_accessKeyId" type="password" />
        </el-form-item>
        <el-form-item
          :label="$t('接收秘钥密码')"
          prop="tencent_accessKeySecret"
        >
          <el-input
            v-model="uploadForm.tencent_accessKeySecret"
            type="password"
          />
        </el-form-item>
        <el-form-item :label="$t('地区')" prop="tencent_region">
          <el-input v-model="uploadForm.tencent_region" />
        </el-form-item>
        <el-form-item :label="$t('协议头')" prop="tencent_protocolHeader">
          <el-input v-model="uploadForm.tencent_protocolHeader" />
        </el-form-item>
        <el-form-item :label="$t('容器名')" prop="tencent_bucket">
          <el-input v-model="uploadForm.tencent_bucket" />
        </el-form-item>
      </div>
      <div v-if="uploadForm.storage == 'aliyun'" class="flex-form">
        <el-form-item :label="$t('接收秘钥ID')" prop="aliyun_accessKeyId">
          <el-input v-model="uploadForm.aliyun_accessKeyId" type="password" />
        </el-form-item>
        <el-form-item :label="$t('接收秘钥密码')" prop="aliyun_accessKeySecret">
          <el-input
            v-model="uploadForm.aliyun_accessKeySecret"
            type="password"
          />
        </el-form-item>
        <el-form-item :label="$t('根地址')" prop="aliyun_storageRoot">
          <el-input v-model="uploadForm.aliyun_storageRoot" />
        </el-form-item>
        <el-form-item :label="$t('容器名')" prop="aliyun_bucket">
          <el-input v-model="uploadForm.aliyun_bucket" />
        </el-form-item>
      </div>
      <div v-if="uploadForm.storage == 'qiniu'" class="flex-form">
        <el-form-item :label="$t('接收秘钥ID')" prop="qiniu_accessKeyId">
          <el-input v-model="uploadForm.qiniu_accessKeyId" type="password" />
        </el-form-item>
        <el-form-item :label="$t('接收秘钥密码')" prop="qiniu_accessKeySecret">
          <el-input
            v-model="uploadForm.qiniu_accessKeySecret"
            type="password"
          />
        </el-form-item>
        <el-form-item :label="$t('根地址')" prop="qiniu_storageRoot">
          <el-input v-model="uploadForm.qiniu_storageRoot" />
        </el-form-item>
        <el-form-item :label="$t('容器名')" prop="qiniu_bucket">
          <el-input v-model="uploadForm.qiniu_bucket" />
        </el-form-item>
      </div>

      <el-button class="save" type="primary" @click="saveUpload">
        {{ $t('保存') }}
      </el-button>
    </el-form>
  </div>
</template>

<script>
import systemApi from '@/api/system/system.js'
export default {
  props: ['data'],
  data() {
    return {
      filesData: '',
      // options: '',
      form_title: '',
      uploadType: '',
      group: '',
      uploadForm: {
        group: this.data.group,
        storage: '',
        file_size: '',
        file_ext: '',
        image_size: '',
        image_ext: '',
        video_size: '',
        video_ext: '',
        audio_size: '',
        audio_ext: '',
        zip_size: '',
        zip_ext: '',
        tencent_accessKeyId: '',
        tencent_accessKeySecret: '',
        tencent_region: '',
        tencent_protocolHeader: '',
        tencent_bucket: '',
        // 阿里云
        aliyun_storageRoot: '',
        aliyun_accessKeyId: '',
        aliyun_accessKeySecret: '',
        aliyun_bucket: '',
        // 七牛云
        qiniu_storageRoot: '',
        qiniu_bucket: '',
        qiniu_protocolHeader: '',
        qiniu_accessKeySecret: '',
        qiniu_accessKeyId: ''
      },
      tecentData: [], // 腾讯云数据
      aliData: [], // 阿里云数据
      qiniuData: [], // 七牛云数据
      upload: {
        chunk_size: [
          {
            required: 'true',
            message: this.$t('请输入分片大小'),
            trigger: 'blur'
          }
        ],
        chunk_condition: [
          {
            required: 'true',
            message: this.$t('请输入分片上传触发条件'),
            trigger: 'blur'
          }
        ],
        storage: [
          {
            required: 'true',
            message: this.$t('请选择存储方式'),
            trigger: 'change'
          }
        ],
        file_size: [
          {
            required: 'true',
            message: this.$t('请输入文件大小'),
            trigger: 'blur'
          }
        ],
        file_ext: [
          {
            required: 'true',
            message: this.$t('请输入文件格式'),
            trigger: 'blur'
          }
        ],
        image_size: [
          {
            required: 'true',
            message: this.$t('请输入图片大小'),
            trigger: 'blur'
          }
        ],
        image_ext: [
          {
            required: 'true',
            message: this.$t('请输入图片格式'),
            trigger: 'blur'
          }
        ],
        video_size: [
          {
            required: 'true',
            message: this.$t('请输入视频大小'),
            trigger: 'blur'
          }
        ],
        video_ext: [
          {
            required: 'true',
            message: this.$t('请输入视频格式'),
            trigger: 'blur'
          }
        ],
        audio_size: [
          {
            required: 'true',
            message: this.$t('请输入音频大小'),
            trigger: 'blur'
          }
        ],
        audio_ext: [
          {
            required: 'true',
            message: this.$t('请输入音频格式'),
            trigger: 'blur'
          }
        ],
        zip_size: [
          {
            required: 'true',
            message: this.$t('请输入压缩包大小'),
            trigger: 'blur'
          }
        ],
        zip_ext: [
          {
            required: 'true',
            message: this.$t('请输入压缩包格式'),
            trigger: 'blur'
          }
        ],
        tencent_accessKeyId: [
          {
            required: 'true',
            message: this.$t('请输入接收秘钥ID'),
            trigger: 'blur'
          }
        ],
        tencent_accessKeySecret: [
          {
            required: 'true',
            message: this.$t('请输入接收秘钥密码'),
            trigger: 'blur'
          }
        ],
        tencent_region: [
          { required: 'true', message: this.$t('请输入地区'), trigger: 'blur' }
        ],
        tencent_protocolHeader: [
          {
            required: 'true',
            message: this.$t('请输入协议头'),
            trigger: 'blur'
          }
        ],
        tencent_bucket: [
          {
            required: 'true',
            message: this.$t('请输入容器名'),
            trigger: 'blur'
          }
        ],
        aliyun_accessKeyId: [
          {
            required: 'true',
            message: this.$t('请输入接收秘钥ID'),
            trigger: 'blur'
          }
        ],
        aliyun_accessKeySecret: [
          {
            required: 'true',
            message: this.$t('请输入接收秘钥密码'),
            trigger: 'blur'
          }
        ],
        aliyun_storageRoot: [
          {
            required: 'true',
            message: this.$t('请输入根地址'),
            trigger: 'blur'
          }
        ],
        aliyun_bucket: [
          {
            required: 'true',
            message: this.$t('请输入容器名'),
            trigger: 'blur'
          }
        ],
        qiniu_accessKeyId: [
          {
            required: 'true',
            message: this.$t('请输入接收秘钥ID'),
            trigger: 'blur'
          }
        ],
        qiniu_accessKeySecret: [
          {
            required: 'true',
            message: this.$t('请输入接收秘钥密码'),
            trigger: 'blur'
          }
        ],
        qiniu_storageRoot: [
          {
            required: 'true',
            message: this.$t('请输入根地址'),
            trigger: 'blur'
          }
        ],
        qiniu_bucket: [
          {
            required: 'true',
            message: this.$t('请输入容器名'),
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created() {
    this.filesData = this.data.children
    this.data.children[0].children.forEach(item => {
      if (item.id == 59) {
        this.tecentData = item.children
      } else if (item.id == 15) {
        this.aliData = item.children
      } else if (item.id == 16) {
        this.qiniuData = item.children
      }
    })
    // this.tecentData = this.data.children[0].children[0].children
    // this.aliData = this.data.children[0].children[2].children
    // this.qiniuData = this.data.children[0].children[3].children
    this.group = this.data.group
    this.filesData.forEach(el => {
      this.uploadForm[el.title] = el.value
    })
    this.tecentData.forEach(el => {
      this.uploadForm[el.title] = el.value
    })
    this.aliData.forEach(el => {
      this.uploadForm[el.title] = el.value
    })
    this.qiniuData.forEach(el => {
      this.uploadForm[el.title] = el.value
    })
    // this.options = this.data.children[0].children
  },
  methods: {
    chooseStorage(val) {},
    saveUpload() {
      let val = {}
      if (this.uploadForm.storage == 'tencent') {
        val = {
          group: this.data.group,
          storage: this.uploadForm.storage,
          file_size: this.uploadForm.file_size,
          file_ext: this.uploadForm.file_ext,
          image_size: this.uploadForm.image_size,
          image_ext: this.uploadForm.image_ext,
          video_size: this.uploadForm.video_size,
          video_ext: this.uploadForm.video_ext,
          audio_size: this.uploadForm.audio_size,
          audio_ext: this.uploadForm.audio_ext,
          zip_size: this.uploadForm.zip_size,
          zip_ext: this.uploadForm.zip_ext,
          tencent_accessKeyId: this.uploadForm.tencent_accessKeyId,
          tencent_accessKeySecret: this.uploadForm.tencent_accessKeySecret,
          tencent_region: this.uploadForm.tencent_region,
          tencent_protocolHeader: this.uploadForm.tencent_protocolHeader,
          tencent_bucket: this.uploadForm.tencent_bucket
        }
      } else if (this.uploadForm.storage == 'aliyun') {
        val = {
          group: this.data.group,
          storage: this.uploadForm.storage,
          file_size: this.uploadForm.file_size,
          file_ext: this.uploadForm.file_ext,
          image_size: this.uploadForm.image_size,
          image_ext: this.uploadForm.image_ext,
          video_size: this.uploadForm.video_size,
          video_ext: this.uploadForm.video_ext,
          audio_size: this.uploadForm.audio_size,
          audio_ext: this.uploadForm.audio_ext,
          zip_size: this.uploadForm.zip_size,
          zip_ext: this.uploadForm.zip_ext,
          aliyun_storageRoot: this.uploadForm.aliyun_storageRoot,
          aliyun_accessKeyId: this.uploadForm.aliyun_accessKeyId,
          aliyun_accessKeySecret: this.uploadForm.aliyun_accessKeySecret,
          aliyun_bucket: this.uploadForm.aliyun_bucket
        }
      } else if (this.uploadForm.storage == 'qiniu') {
        val = {
          group: this.data.group,
          storage: this.uploadForm.storage,
          file_size: this.uploadForm.file_size,
          file_ext: this.uploadForm.file_ext,
          image_size: this.uploadForm.image_size,
          image_ext: this.uploadForm.image_ext,
          video_size: this.uploadForm.video_size,
          video_ext: this.uploadForm.video_ext,
          audio_size: this.uploadForm.audio_size,
          audio_ext: this.uploadForm.audio_ext,
          zip_size: this.uploadForm.zip_size,
          zip_ext: this.uploadForm.zip_ext,
          qiniu_storageRoot: this.uploadForm.qiniu_storageRoot,
          qiniu_bucket: this.uploadForm.qiniu_bucket,
          qiniu_protocolHeader: this.uploadForm.uploadForm.qiniu_protocolHeader,
          qiniu_accessKeySecret: this.uploadForm.qiniu_accessKeySecret,
          qiniu_accessKeyId: this.uploadForm.qiniu_accessKeyId
        }
      } else {
        val = {
          group: this.data.group,
          storage: this.uploadForm.storage,
          file_size: this.uploadForm.file_size,
          file_ext: this.uploadForm.file_ext,
          image_size: this.uploadForm.image_size,
          image_ext: this.uploadForm.image_ext,
          video_size: this.uploadForm.video_size,
          video_ext: this.uploadForm.video_ext,
          audio_size: this.uploadForm.audio_size,
          audio_ext: this.uploadForm.audio_ext,
          zip_size: this.uploadForm.zip_size,
          zip_ext: this.uploadForm.zip_ext
        }
      }

      systemApi.sysUpdate(val).then(res => {
        if (res.code == 0) {
          this.$message.success(res.msg)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.flex-form {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  .el-form-item {
    width: calc(50% - 80px);
    margin-right: 80px;
  }
  .row.el-form-item {
    width: 100%;
  }
}
</style>
